<template>
	<div class="ruler-box">
		<div class="min-value">{{ min }}</div>
		<div class="cursor-1" :style="cursor1Style">
			<div class="cursor-value"></div>
		</div>
		<div class="cursor-2" :style="cursor2Style">
			<div class="cursor-value"></div>
		</div>
		<div class="ruler">
			<div class="range" :style="rangeStyle"></div>
			<div class="range-values"></div>
		</div>

		<div class="max-value">{{ max }}</div>

		<div class="range-min-value" :style="rangeMinValueStyle">{{ rangeMin }}</div>
		<div class="range-max-value" :style="rangeMaxValueStyle">{{ rangeMax }}</div>
	</div>
</template>
  
<script>
import { ref, reactive, watch, computed } from "vue";

export default {
	name: "Ruler",
	props: {
		min: {
			type: Number,
			default: -100,
		},
		max: {
			type: Number,
			default: Infinity,
		},
		rangeMin: {
			type: Number,
			default: -50,
		},
		rangeMax: {
			type: Number,
			default: 50,
		},
		cursor1: {
			type: Number,
			default: -25,
		},
		cursor2: {
			type: Number,
			default: 25,
		},
	},
	setup(props) {
		const ticks = ref([]);
		const rangeStyle = reactive({
			left: "0%",
			width: "100%",
		});

		const cursor1Style = reactive({
			left: "0%",
		});

		const cursor2Style = reactive({
			left: "100%",
		});

		// 计算刻度标记
		const calculateTicks = () => {
			const totalTicks = Math.floor((props.max - props.min) / 10) + 1;
			ticks.value = Array.from(
				{ length: totalTicks },
				(_, index) => props.min + index * 10
			);
		};

		// 监听属性变化
		watch([() => props.min, () => props.max], calculateTicks);

		// 计算范围区域样式
		const calculateRangeStyle = () => {
			const rangeWidth =
				((props.rangeMax - props.rangeMin) / (props.max - props.min)) * 100;
			const rangeLeft = ((props.rangeMin - props.min) / (props.max - props.min)) * 100;

			rangeStyle.left = `${rangeLeft}%`;
			rangeStyle.width = `${rangeWidth}%`;

			const cursor1Left = ((props.cursor1 - props.min-2) / (props.max - props.min-2)) * 100;
			cursor1Style.left = `${cursor1Left}%`;

			const cursor2Left = ((props.cursor2 - props.min-2) / (props.max - props.min-2)) * 100;
			cursor2Style.left = `${cursor2Left}%`;
		};

		// 监听范围区域属性变化
		watch([() => props.rangeMin, () => props.rangeMax, () => props.cursor1, () => props.cursor2], calculateRangeStyle);

		// 初始化计算
		calculateTicks();
		calculateRangeStyle();

		// 计算范围值位置样式
		const rangeMinValueStyle = computed(() => {
			const rangeLeft = ((props.rangeMin - props.min) / (props.max - props.min)) * 100;

			return {
				left: `${rangeLeft}%`,
			};
		});

		const rangeMaxValueStyle = computed(() => {
			const rangeRight = ((props.max - props.rangeMax) / (props.max - props.min)) * 100;

			return {
				right: `${rangeRight}%`,
			};
		});

		return {
			ticks,
			rangeStyle,
			cursor1Style,
			cursor2Style,
			rangeMinValueStyle,
			rangeMaxValueStyle,
		};
	},
};
</script>
  
<style scoped>
.ruler-box {
	position: relative;
}

.ruler {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 10px;
	height: 12px;
	background: #363942;
	border-radius: 15px;
}

.ruler .ticks {
	position: relative;
	height: 10px;
	display: flex;
	justify-content: space-between;
}

.ruler .tick {
	width: 1px;
	height: 6px;
	background-color: #ccc;
}

.ruler .range {
	position: absolute;
 	top: 0;
	bottom: 0;
	background: #34554E;
	border-left: 4px solid #31C27E;
	border-right: 4px solid #31C27E;
}

.ruler .range-values {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
}

.ruler-box .cursor-1,
.ruler-box .cursor-2 {
	position: absolute;
	top: -20px;
	width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-top-color: #FEC22D;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.ruler-box .cursor-1 ::before {
	border-top: 5px solid yellow; /* 修改倒三角形颜色为黄色 */
}
.yellow-triangle::before {
  border-top: 5px solid yellow; /* 修改倒三角形颜色为黄色 */
}
.ruler-box .cursor-value {
	position: absolute;
	width: 4px;
	height: 30px;
	background: #FEC22D;
	z-index: 1;
	top:12px
}

.ruler .cursor-1::before,
.ruler .cursor-1::after,
.ruler .cursor-2::before,
.ruler .cursor-2::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #ccc;
}

.ruler .cursor-1::before,
.ruler .cursor-2::before {
	width: 6px;
	height: 6px;
	background-color: #fff;
}

.min-value,
.max-value{
	position: absolute;
	bottom: -20px;
	font-size: 12px;
	color: #929397;
}
.max-value{
	right: 0;
}
.range-min-value,
.range-max-value {
	position: absolute;
	bottom: -20px;
	font-size: 12px;
	color: #929397;
	
}

.range-min-value {
	left: 0;
}

.range-max-value {
	right: 0;
}
</style>F